<template>
  <view class="container">
    <image class="book-cover" :src="book.cover" mode="aspectFill"></image>
    <text class="book-title">{{ book.title }}</text>
    <text class="book-author">作者：{{ book.author }}</text>
    <view class="buttons">
      <button @click="goToChapterList">阅读</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      book: {}
    };
  },
  onLoad(options) {
    this.fetchBookDetail(options.bookId);
  },
  methods: {
    async fetchBookDetail(bookId) {
      const res = await this.$api.getBookDetail(bookId);
      this.book = res.data;
    },
    goToChapterList() {
      uni.navigateTo({
        url: `/pages/chapterList/chapterList?bookId=${this.book.id}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  text-align: center;
}
.book-cover {
  width: 100%;
  height: 300px;
  border-radius: 10px;
}
.book-title {
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0;
}
.book-author {
  font-size: 16px;
  color: #666;
}
.buttons {
  margin-top: 20px;
}
button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #007aff;
  color: #fff;
  border-radius: 10px;
}
</style>